<template>

	<view class="page">
		<view class="page-header">
			<cc-beautyTabs :tabList="Tabs.list" @tabChange="PageTabsAndSwiperChange('tabs',$event)"
				:active="Tabs.current"></cc-beautyTabs>
		</view>
		<swiper class="page-swiper" :current="Tabs.current" circular :indicator-dots="false"
			@change="PageTabsAndSwiperChange('swiper',$event)">
			<swiper-item class="swiper-item page-index">
				<NoticeMessageList :data="Notice"></NoticeMessageList>
				<ConversationList :data="Conversation" @click="clickConversation"></ConversationList>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<wd-index-bar sticky>
						<view v-for="item in Mail.list" :key="item.index">
							<wd-index-anchor :index="item.index" />
							<wd-cell border clickable v-for="city in item.data" :key="city" :title="city" ></wd-cell>
						</view>
					</wd-index-bar>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item page-index">
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import ConversationList from './components/conversation_list/conversation_list.vue'
	import NoticeMessageList from './components/notice_message/notice_message.vue'
	import {
		watch,
		computed,
		reactive
	} from 'vue'
	import {
		onPageScroll,
		onReady
	} from "@dcloudio/uni-app"

	import overallRequest from "@/utool/http/http.js"
	import useMessageStore from '@/stores/store/message.js'
	const MessageStore = useMessageStore()
	const Tabs = computed(() => MessageStore.Tabs)
	const Notice = computed(() => MessageStore.Notice)
	const Conversation = computed(() => MessageStore.Conversation)
	const Mail = computed(() => MessageStore.Mail)

	watch(()=>MessageStore.Tabs.current, (current) => {
		if(current == 0){
			let ConversationinitData = MessageStore.Conversation.initData
			if(!ConversationinitData){
				MessageStore.GetConversationList()
			}
			let NoticeMessageInitData =  MessageStore.Notice.initData
			if(!NoticeMessageInitData){
				MessageStore.GetServerNoticeMessageList()
			}
		}else if(current == 1){
			let initData = MessageStore.Mail.initData 
			if(!initData){
				MessageStore.GetMailList()
			}
		}else if(current ==2){
			
		}
	}, {
		deep: true,
		immediate: true
	})
	function clickConversation(data) {
		let id = data.id
		uni.navigateTo({
			url: `/pages/Tarbar/Conversation/value?id=${id}`,
			success: res => {
				res.eventChannel.emit('ConversationList', {
					data: user
				})
			},
			fail: (err) => {
				uni.showToast({
					icon: "none",
					title: "加载聊天页面失败"
				})
			}
		})
	}
	function PageTabsAndSwiperChange(mode, e) {
		let detail = e.detail
		let index = null
		if (mode == "swiper") {
			index = detail.current
		} else if (mode == "tabs") {
			index = detail.index
		}
		MessageStore.PageChangeUpdate(index)
	}
</script>

<style scoped>
	page {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.page {
		height: 100%;
		display: flex;
		flex-direction: column;
		height: 100%;
		/* background: linear-gradient(180deg, rgba(82, 140, 232, 0.32816876750700286) 21%, rgba(254, 254, 254, 1) 55%); */
	}
</style>